<template>
	<!-- 列表内容 -->
	<el-card>
		<el-table :data="list" style="width: 100%" stripe>
			<el-table-column prop="id" label="序号" width="100" />
			<el-table-column prop="subject" label="课程" />
			<el-table-column prop="content" label="内容" width="300" />
			<el-table-column prop="place" label="地点" width="100" />
			<el-table-column label="状态" width="200">
				<template #default="{row}">
					<el-space :size="10">
						<el-switch v-model="row.status" /><span>{{row.status ? '已完成' : '未完成' }}</span>
					</el-space>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
    },
  },
  methods: {
    toggleStatus(item, status) {
      item.status = status;
      // 可以在这里添加发送到后端更新状态的逻辑
    },
    remove(item) {
      // 只有已完成，可以删除
      if (item.status) {
        this.$emit('delItem', item.id); // 触发父组件自定义方法，并传参
      } else {
        alert('请完成该学习计划后再进行删除操作！');
      }
    },
  },
};
</script>

<style>
.table-container {
  border-top: 1px solid #e6e6e6;
  padding: 10px 15px;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  border: 1px solid #e6e6e6;
  padding: 8px;
  text-align: left;
}
.table thead th {
  background-color: #f5f7fa;
  color: #333;
}
.status-switch {
  display: inline-block;
  position: relative;
  width: 60px; /* 减小按钮容器宽度 */
  height: 24px; /* 减小按钮容器高度 */
  border: 1px solid #e6e6e6;
  border-radius: 12px; /* 调整圆角 */
  overflow: hidden;
}
.status-switch span {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 24px; /* 调整行高适应高度 */
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.status-switch-left {
  position: absolute;
  left: 0;
  background-color: #f5f7fa;
  color: #333;
}
.status-switch-right {
  position: absolute;
  right: 0;
  background-color: #f5f7fa;
  color: #333;
}
.active {
  background-color: #007bff;
  color: white;
}
.completed-red {
  color: red; /* 已完成时文字颜色变红 */
}
</style>